<template>
	<div class="con-z">
		<!-- <div class="left">
			<ConLeft  :msglist="msglist" ></ConLeft>
		</div> -->
		<div class="right">

			<div class="right-bto">
				
				
				<div class="main">
					<div class="search flex">
						<div class="add-mian" >
							 <el-button type="primary" @click="add">添加</el-button>
						</div>
					</div>
					
				<el-table :data="tableData" height="550" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
						:cell-style="{'text-align':'center'}" border>
						<el-table-column  type="index" width="80"></el-table-column>
						<el-table-column prop="name"  label="标题" min-width="80"></el-table-column>
						<el-table-column label="模板类型" min-width="80">
							<template slot-scope="scope" >
								{{scope.row.type_text}}
							</template>
						</el-table-column>
						
						<el-table-column prop="least_num" label="图片数量" min-width="80"></el-table-column>
						<el-table-column prop="is_details_text" label="是否包含详情" min-width="80"></el-table-column>
						<el-table-column prop="is_video_text" label="是否包含视频" min-width="80"></el-table-column>
						<el-table-column  prop="is_custom_text" label="是否可自定义字段" min-width="80"></el-table-column>
						<el-table-column prop="size_limit_text"   label="尺寸限制" min-width="80">
						</el-table-column>
						
					<el-table-column prop="createtime" :formatter="formatDate" label="创建时间" ></el-table-column>
					
					<el-table-column label="操作" width="400">
						<template slot-scope="scope" >
							<el-button type="primary"   @click="handlepeizhi(scope.row)" v-if="scope.row.is_custom">配置</el-button>
							<el-button type="success"   @click="toziyuan(scope.row)">资源管理</el-button>
							<el-button type="warning" @click="handlelook(scope.row)">修改</el-button>
							<el-button type="danger" @click="handledel(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				</div>
				<div class="block" style="margin-top: 18px;">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="page"
						:page-sizes="[10]"
						:page-size="10"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
					</el-pagination>
				</div>
			</div>
			
		</div>
		
		<el-dialog :title="form.id?'修改':'添加'" :visible.sync="dialogVisible" width="60%" :before-close="close">
			<span>
				<el-form ref="form"  :model="form"   :rules="rules" label-width="100px"  :inline="false">
					<el-row style="padding-bottom:20px ;">
						<el-col :span="8">
							<el-form-item label="标题"    prop="name">
								 <el-input   v-model="form.name" clearable style="width: 200px;"   ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
						<el-form-item label="模板类型" required    prop="type">
							<el-select v-model="form.type" placeholder="请选择"   style="width: 200px;" clearable >
							   <el-option
							     v-for="item in mobanlist"
							     :key="item.key"
							     :label="item.value"
							     :value="item.key"
									>
							   </el-option>
							 </el-select>
						</el-form-item>
						</el-col>
					</el-row>
					<el-row style="padding-bottom: 20px;">
						<el-col :span="8">
						
							<el-form-item  label="图片数量" required    prop="least_num">
								 <el-input   v-model="form.least_num" style="width: 200px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
						<el-form-item label="尺寸限制宽" required   prop="width" >
							 <el-input   v-model="form.width"  style="width: 200px;"   ></el-input>
						</el-form-item>
							</el-col>
							<el-col :span="8">
						<el-form-item label="尺寸限制高" required   prop="height" >
							 <el-input   v-model="form.height"  style="width: 200px;"   ></el-input>
						</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						
						<el-col :span="8">
							<el-form-item label="是否包含视频" label-width="140px" >
								<el-switch
								  v-model="form.is_video"
								  active-color="#13ce66"
								  inactive-color="#ff4949"
								  :active-value="1"
								  :inactive-value="0"
								  >
								</el-switch>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="是否包含详情"  label-width="120px" >
								<el-switch
								  v-model="form.is_details"
								  active-color="#13ce66"
								  inactive-color="#ff4949"
								 :active-value="1"
								 :inactive-value="0"
								  >
								</el-switch>
							</el-form-item>
						</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" style="display: flex; align-items: center;">
								<el-form-item label="是否可自定义字段" label-width="140px" >
									<el-switch
									  v-model="form.is_custom"
									  active-color="#13ce66"
									  inactive-color="#ff4949"
									  :active-value="1"
									  :inactive-value="0"
									  >
									</el-switch>
								</el-form-item>
							</el-col>
						
						</el-row>
					<div v-if="form.is_custom == '1'">
						<el-button type="primary" @click="shujuadd" style="margin-top: 10px;margin-bottom: 10px;">添加</el-button>
						<el-table :data="form.custom_field_text"  stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
								:cell-style="{'text-align':'center'}" border>
								<el-table-column label="名称" min-width="80">
									<template slot-scope="scope" >
										<el-input   v-model="scope.row.name" clearable style="width: 150px;"   ></el-input>
									</template>
								</el-table-column>
								<el-table-column label="字段名" min-width="80">
									<template slot-scope="scope" >
										<el-input   v-model="scope.row.field" clearable style="width: 150px;"   ></el-input>
									</template>
								</el-table-column>
							<el-table-column label="字段类型" width="400">
								<template slot-scope="scope" >
									<el-select v-model="scope.row.type" placeholder="请选择"   style="width: 200px;" clearable >
									   <el-option
									     v-for="item in shujulist"
									     :key="item.key"
									     :label="item.value"
									     :value="item.key"					  >
									   </el-option>
									 </el-select>
								</template>
							</el-table-column>
							
						</el-table>
					</div>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog :title="'自定义配置'" :visible.sync="dialogVisiblea" width="30%" :before-close="closea">
			<span>
				<el-form ref="forma"  :model="forma"   label-width="100px"  :inline="false">
					<el-row v-for="(item,index) in forma.custom_field_text" :key="index" >
						<el-col :span="6">
							<el-form-item  :label="item.name" v-if="item.type=='string' ">
								 <el-input   v-model="item.value" placeholder="请输入内容"   style="width: 175px;"></el-input>
							</el-form-item>
							<el-form-item  :label="item.name"   v-if="item.type=='text'" >
								 <el-input   v-model="form.value" placeholder="请输入内容"  :rows="5" type="textarea" style="width: 175px;"></el-input>
							</el-form-item>
							<el-form-item :label="item.name" v-if="item.type=='image'" >
								
								
								<el-upload class="avatar-uploader" style="position: relative;" :action="url+'back/common/upload' " :show-file-list="false"
								:disabled ="item.value?true:false"
									:headers="headers" :on-success="handlelegaz.bind( this,index)">
								
									<el-image
									class="avatar"
									v-if="item.value"
									   style="width: 100%;height: 175px;"
									   :src="imgurl+item.value" 
									   :preview-src-list="[imgurl+form.imageurl]">
									 </el-image>
									 <el-button type="danger" icon="el-icon-close" circle style="position: absolute;right:0px;top: 0;" size="mini" v-if="item.value" @click="cleardandu(index,'img')"></el-button>
									 <span v-else class=" avatar-uploader-icon">
											<div>
												建议上传尺寸
																							
												<div>
													 {{  '无限制'}}
												</div>
											</div>
									 </span>
									<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closea">取 消</el-button>
				<el-button type="primary" @click="submita()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import setting from '@/config/setting';
	export default{
		data(){
			return{
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				page:1,
				pages:1,
				totals:0,
				total:0,
				tableData:[],
				form:{
					name:'',
					type:'',
					least_num:'',
					width:'',
					height:'',
					is_video:0,
					is_custom:0,
					is_details:0,
					custom_field_text:[]
				},
				    rules: {
				          name: [
				            { required: true, message: '请输入模板标题', trigger: 'blur' },
				            
				          ],
				         type: [
				            { required: true, message: '请选择模板类型', trigger: 'change' }
				          ],
						  least_num: [
						    { required: true, message: '请输入图片数量', trigger: 'blur' },
						    
						  ],
						 width: [
						    { required: true, message: '请输入图片限制宽度', trigger: 'blur' },
						    
						  ],
						  height: [
						    { required: true, message: '请输入图片限制高度', trigger: 'blur' },
						    
						  ],
				        
				        },
				keywords:'',
				mobanlist:[],
				
				shujulist:[],
				dep_id:0,
				selectlist:[],
				dialogVisible1:false,
				canhuirenlist:[],
				arylist:[],
				forma:{},
				dialogVisiblea:false,
			}
		},
		mounted(){
			this.getlist()
			this.getmobanlist()
			this.getshujulist()
		},
		methods:{
			formatDate(row, column) {
			                let data = row[column.property]
			                if (data == null) {
			                    return null
			                }
			                let dt = new Date(data * 1000)
			                let Month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
			                let Day = dt.getDate() < 10 ? '0' + (dt.getDate()) : dt.getDate();
			                let Hours = dt.getHours() < 10 ? '0' + (dt.getHours()) : dt.getHours();
			                let Minutes = dt.getMinutes() < 10 ? '0' + (dt.getMinutes()) : dt.getMinutes();
			                let Seconds = dt.getSeconds() < 10 ? '0' + (dt.getSeconds()) : dt.getSeconds();
			                return dt.getFullYear() + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds
			            },
			// 任务列表
			getlist(){
				this.$http.get('/back/template/list?size=10&page=' + this.page).then(res => {
					this.tableData = res.data.data.data
					this.page = res.data.data.current_page
					this.total = res.data.data.total
				})
			},
			getmobanlist(){
				this.$http.get('/back/data/templateType').then(res => {
					console.log(res.data.data)
					this.mobanlist =res.data.data
				})
			},
		
			getshujulist(){
				this.$http.get('/back/data/templateFieldType').then(res => {
					console.log(res.data.data)
					this.shujulist =res.data.data
				})
			},
			shujuadd(){
				let obj={}
				obj.field = ''
				obj.name = ''
				obj.type = ''
				this.form.custom_field_text.push(obj)
			},
		
			handleAvatarSuccess(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}
				console.log( res)
				this.$set(this.form, 'attachment_url', res.code.url)
			},
			 handleClose(item) {
				 let ary = []
			        this.arylist.splice(this.arylist.indexOf(item), 1);
					this.arylist.forEach(item => {
						ary.push(item.id)
					})
					this.form.user_ids = ary
					console.log(this.form.user_ids)
					this.$refs.multipleTable.toggleRowSelection(item);
			      },
				  clear(){
					  this.arylist.forEach((item) => {
						  this.$refs.multipleTable.toggleRowSelection(item);
					  })
					  this.form.user_ids = []
					  this.arylist = []
				  },
			add(){
				this.form={}
				this.form = {
					
					is_video:0,
					is_custom:0,
					is_details:0,
					custom_field_text:[]
				}
				this.dialogVisible = true
			},
			// 添加图片视频
			submit(){
				
				this.$http.post('/back/template/edit',this.form).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible=false;
						this.arylist = []
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			submita(){
				console.log(this.forma)
				this.$http.post('/back/resource/peizhiedit',this.forma).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisiblea=false;
					
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			handlelook(item){
				this.form = item
				this.dialogVisible = true
				
			},
			handlepeizhi(item){
				console.log('这是配置的item',item)
				this.$http.post('/back/resource/peizhiList',{
					template_id:item.id
				}).then(res => {
					if (res.data.code == 1) {
						// this.$message({
						// 	message: res.data.msg,
						// 	type: 'success'
						// });
						// console.log(res)
						this.forma=res.data.data
						this.dialogVisiblea=true;
						
					} else {
						this.$message.error(res.data.msg);
					}
				})
				
				
				
			},
			handlelegaz(index,res) {
				 if(res.code == 0){
				 	this.$message.error(res.msg);
				 }
				 this.$message.success(res.msg);
					this.$set(this.forma.custom_field_text[index],'value',res.code.url)	
			},
			cleardandu(index,type){
				
					this.$http.post(`/back/resource/danurldel`,{
						url:this.forma.custom_field_text[index].value,
					}).then(res => {
						console.log(res)
						if(res.data.code==1){
							this.$message.success(res.data.msg);
							this.forma.custom_field_text[index].value=''
						}else{
							this.$message.error(res.data.msg);
						}
					})
			
				
			},
			toziyuan(item){
				this.$router.push({
					 path: "/mobanguanli/ziyuan",
					  query: {
					    obj: item
					  }
				})
			},
			close(){
				this.form = {
					is_video:0,
					is_picture:0,
					is_custom:0,
					custom_field_text:[]
				}
				this.getlist()
				this.dialogVisible = false
			},
			closea(){
				// this.form = {
				// 	is_video:0,
				// 	is_picture:0,
				// 	is_custom:0,
				// 	custom_field_text:[]
				// }
				this.dialogVisiblea = false
				this.getlist()
				
			},
			handledel(item){
				this.$confirm('此操作将删除该产品所有信息, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
											this.$http.post('/back/template/del',{
												id:item.id
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
													
													this.getlist();
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消删除'
				         });          
				       });
			},
			handleSelectionChange(val) {
					let ary = []
					this.selectlist = val
					val.forEach(item => {
						this.arylist.push(item)
					})
					
					this.arylist = [...new Set(this.arylist)]
					this.arylist.forEach(item => {
						ary.push(item.id)
					})
					this.form.user_ids = ary
					
			},
			toggleSelection(rows) {
			      if (rows) {
			        rows.forEach(row => {
			          this.$refs.multipleTable.toggleRowSelection(row);
			        });
			      } else {
			        this.$refs.multipleTable.clearSelection();
			      }
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			 
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
			handleSizeChanges(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChanges(val) {
			    console.log(`当前页: ${val}`);
				this.pages=val;
				this.getrenyuanlist();
				
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.box{
		display: inline-block;
		padding: 5px 10px;
		margin: 10px;
		background-color: #55aaff;
		color:#fff;
		border-radius: 8px;
	}
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		height: 178px;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 178px;
		height: 178px;
	
		font-size: 14px;
		text-align: center;
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.add-mian{
		margin-bottom: 20px;
	}
	.con-z{
		height:90vh;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>